{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!-- Bootstrap core CSS -->
    <link href="{% static 'plugins/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
    <!--external css-->
    <link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" />

    <!-- Custom styles for this template -->
    <link href="{% static 'css/style.css' %}" rel="stylesheet">

    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <script src="{% static 'plugins/layui/layui.js' %}"></script>


    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    {% block style %}{% endblock %}
</head>
<body>
<section id="container" >
    <!--header start-->
    <header class="header black-bg">
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
        </div>
        <!--logo start-->
        <a href="?" class="logo"><b>堡垒机</b></a>
        <!--logo end-->
        <div class="nav notify-row" id="top_menu">
            <!--  notification start -->
            <ul class="nav top-menu">
                <!-- settings start -->
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="?">
                        <i class="fa fa-tasks"></i>
                        <span class="badge bg-theme">4</span>
                    </a>
                    <ul class="dropdown-menu extended tasks-bar">
                        <div class="notify-arrow notify-arrow-green"></div>
                        <li>
                            <p class="green">You have 4 pending tasks</p>
                        </li>
                        <li>
                            <a href="index.html#">
                                <div class="task-info">
                                    <div class="desc">DashGum Admin Panel</div>
                                    <div class="percent">40%</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <div class="task-info">
                                    <div class="desc">Database Update</div>
                                    <div class="percent">60%</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <div class="task-info">
                                    <div class="desc">Product Development</div>
                                    <div class="percent">80%</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                        <span class="sr-only">80% Complete</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <div class="task-info">
                                    <div class="desc">Payments Sent</div>
                                    <div class="percent">70%</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                                        <span class="sr-only">70% Complete (Important)</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="external">
                            <a href="#">See All Tasks</a>
                        </li>
                    </ul>
                </li>
                <!-- settings end -->
                <!-- inbox dropdown start-->
                <li id="header_inbox_bar" class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                        <i class="fa fa-envelope-o"></i>
                        <span class="badge bg-theme">5</span>
                    </a>
                    <ul class="dropdown-menu extended inbox">
                        <div class="notify-arrow notify-arrow-green"></div>
                        <li>
                            <p class="green">You have 5 new messages</p>
                        </li>
                        <li>
                            <a href="index.html#">
                                <span class="photo"><img alt="avatar" src="assets/img/ui-zac.jpg"></span>
                                <span class="subject">
                                    <span class="from">Zac Snider</span>
                                    <span class="time">Just now</span>
                                    </span>
                                <span class="message">
                                        Hi mate, how is everything?
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <span class="photo"><img alt="avatar" src="assets/img/ui-divya.jpg"></span>
                                <span class="subject">
                                    <span class="from">Divya Manian</span>
                                    <span class="time">40 mins.</span>
                                    </span>
                                <span class="message">
                                     Hi, I need your help with this.
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <span class="photo"><img alt="avatar" src="assets/img/ui-danro.jpg"></span>
                                <span class="subject">
                                    <span class="from">Dan Rogers</span>
                                    <span class="time">2 hrs.</span>
                                    </span>
                                <span class="message">
                                        Love your new Dashboard.
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">
                                <span class="photo"><img alt="avatar" src="assets/img/ui-sherman.jpg"></span>
                                <span class="subject">
                                    <span class="from">Dj Sherman</span>
                                    <span class="time">4 hrs.</span>
                                    </span>
                                <span class="message">
                                        Please, answer asap.
                                    </span>
                            </a>
                        </li>
                        <li>
                            <a href="index.html#">See all messages</a>
                        </li>
                    </ul>
                </li>
                <!-- inbox dropdown end -->
            </ul>
            <!--  notification end -->
        </div>
        <div class="top-menu">
            <ul class="nav pull-right top-menu">
                <li>
                    <button type="button" class="btn btn-danger" style="margin-top: 12px;" onclick="logout()">Logout</button>
                </li>
            </ul>
        </div>
    </header>
    <!--header end-->

    <!-- **********************************************************************************************************************************************************
    MAIN SIDEBAR MENU
    *********************************************************************************************************************************************************** -->
    <!--sidebar start-->
    <aside>
        <div id="sidebar"  class="nav-collapse ">
            <!-- sidebar menu start-->
            <ul class="sidebar-menu" id="nav-accordion">

                <p class="centered"><a href="#"><img src="{% static 'images/ui-sam.jpg' %}" class="img-circle" width="60"></a></p>
                <h5 class="centered" style="margin-top: 10px;">{{ request.user.name|capfirst }}</h5>

                <li class="mt">
                    <a class="dashboard" href="{% url "dashboard" %}">
                        <i class="fa fa-dashboard"></i>
                        <span>首页</span>
                    </a>
                </li>

                <li class="sub-menu">
                    <a class="web-ssh" href="{% url "web_ssh" %}" >
                        <i class="fa fa-desktop"></i>
                        <span>WEB SSH</span>
                    </a>
                </li>

                <li class="sub-menu">
                    <a class="log-page" href="{% url 'log_page' %}" >
                        <i class="fa fa-book"></i>
                        <span>审计日志</span>
                    </a>
                </li>
                <li class="sub-menu">
                    <a class="host-manage" href="javascript:void(0);">
                        <i class="fa fa-th"></i>
                        <span>主机管理</span>
                    </a>
                    <ul class="sub">
                        <li class="second-li batch_cmd"><a href="{% url 'batch_cmd' %}">批量命令</a></li>
                        <li class="second-li batch_file"><a href="{% url 'batch_file' %}">批量文件传送</a></li>
                    </ul>
                </li>
                <li class="sub-menu">
                    <a class="setting-page" href="{% url 'setting_home' %}" >
                        <i class="fa fa-cogs"></i>
                        <span>设置</span>
                    </a>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
    </aside>
    <!--sidebar end-->

    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper">
            {% block right_container %}
            {% endblock %}
        </section>
    </section>
</section>

<!-- js placed at the end of the document so the pages load faster -->
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery-1.8.3.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>

<script src="{% static 'js/jquery.dcjqaccordion.2.7.js' %}"></script>
<script src="{% static 'js/jquery.scrollTo.min.js' %}"></script>
<script src="{% static 'js/common-scripts.js' %}"></script>
<script src="{% static 'js/cookies.js' %}"></script>
<script>
    /**
     * 设置自动锁屏时间,20分钟
     */
    const IntervalTime = 1000 * 60 * 20;   // 1000 * 60 * 20
    function goto() {
        // 退出登录状态
        $.ajax({
            url: '{% url "lock_screem" %}',
            type: "post",
            headers: {"X-CSRFToken": csrfToken},
            success(args) {
                // 将邮箱存到cookie中
                // document.cookie = 'cookieName=cookieValue;path=/bbb;expires=Thu, 01-Jan-2020 00:00:01 GMT';
                document.cookie = `email=${args};path=/monitor/lock_screem`;
                clearTimeout(timer);
                window.location.href = "{% url 'lock_screem' %}";
            },
        });
    }
    let timer = setTimeout(goto, IntervalTime);
    // 监听鼠标移动事件，当超过20分钟没有移动就跳转
    onmousemove = () => {
        // 当鼠标移动刷新定时器
        clearTimeout(timer);
        timer = setTimeout(goto, IntervalTime);
    };


    // 登出
    function logout() {
        window.location.href = "/logout";
    }
</script>
{% block js %}
{% endblock %}
</body>
</html>